<!DOCTYPE html>
<html>
	<meta charset="utf-8" />
	<title>跟随鼠标移动（大图展示）</title>
	<style type="text/css">
		html,
		body {
			overflow: hidden;
		}
		
		body,
		div,
		ul,
		li {
			margin: 0;
			padding: 0;
		}
		
		#box ul {
			width: 768px;
			height: 172px;
			list-style-type: none;
			margin: 10px auto;
		}
		
		#box li {
			float: left;
			width: 170px;
			height: 170px;
			cursor: pointer;
			display: inline;
			border: 1px solid #ddd;
			margin: 0 10px;
		}
		
		#box li.active {
			border: 1px solid #a10000;
		}
		
		#box li img {
			width: 170px;
			height: 170px;
			vertical-align: top;
		}
		
		#big {
			position: absolute;
			width: 400px;
			height: 400px;
			border: 2px solid #ddd;
			display: none;
		}
		
		#big div {
			position: absolute;
			top: 0;
			left: 0;
			width: 400px;
			height: 400px;
			opacity: 0.5;
			filter: alpha(opacity=50);
			background: #fff url(img/loading.gif) 50% 50% no-repeat;
		}
	</style>
	<script type="text/javascript">
		window.onload = function() {
			var box = document.getElementById("box");
			var arrLI = box.children[0].children;
			var bigbox = document.getElementById("big");
			
			for(var i=0; i<arrLI.length; i++){
				arrLI[i].onmouseenter = function(){
					bigbox.innerHTML = "";
					var newImg = document.createElement("img");
					newImg.src = this.children[0].src.replace(".jpg","_big.jpg");
					bigbox.appendChild(newImg);
					bigbox.style.display = "block";
					
					document.onmousemove = function(e){
						var e = e || event;
						if(e.clientX > (window.innerWidth-bigbox.offsetWidth-10)){
							bigbox.style.left = e.clientX - bigbox.offsetWidth - 10 + "px";
						} else {
							bigbox.style.left = e.clientX + 10 + "px";
						}
						bigbox.style.top = e.clientY + 10 + "px";
					}
				}
				arrLI[i].onmouseleave = function(){
					bigbox.style.display = "none";
					document.onmousemove = "";
				}
			}
		};
	</script>
	</head>

	<body>
		<div id="box">
			<ul>
				<li class=""><img src="shirt_1.jpg"></li>
				<li class=""><img src="shirt_2.jpg"></li>
				<li class=""><img src="shirt_3.jpg"></li>
				<li class=""><img src="shirt_4.jpg"></li>
			</ul>
		</div>
		<div id="big" style="display: none; top: 190px; left: 812px;">

		</div>

	</body>

</html>